<template>
	<view class="bigBox">
		<view class="headerBox">
			<div class="title">
				<image @click="handleLy" src="/static/deviceState/lanya.png" mode=""></image>
				设备状态
				<image @click="reset" src="/static/deviceState/reset.png" mode=""></image>
			</div>
			<div class="time">{{time}} </div>
		</view>
		<view class="container">
			<view class="sixBox">
				<view class="sixItem">
					<image class="six1" src="/static/deviceState/1.png" mode=""></image>
					<view class="rightBox">
						<view class="first">
							<view class="lab">
								室内温度
							</view>
							<view class="con">
								24.5℃
							</view>
						</view>
					</view>
				</view>
				<view class="sixItem">
					<image class="six2" src="/static/deviceState/2.png" mode=""></image>
					<view class="rightBox">
						<view class="first">
							<view class="lab">
								室外温度
							</view>
							<view class="con">
								24.5℃
							</view>
						</view>
					</view>
				</view>
				<view class="sixItem">
					<image class="six3" src="/static/deviceState/3.png" mode=""></image>
					<view class="rightBox">
						<view class="first">
							<view class="lab">
								室内湿度
							</view>
							<view class="con">
								24%
							</view>
						</view>
					</view>
				</view>
				<view class="sixItem">
					<image class="six4" src="/static/deviceState/4.png" mode=""></image>
					<view class="rightBox">
						<view class="first">
							<view class="lab">
								室外湿度
							</view>
							<view class="con">
								24.5%
							</view>
						</view>
					</view>
				</view>
				<view class="sixItem">
					<image class="six5" src="/static/deviceState/5.png" mode=""></image>
					<view class="rightBox">
						<view class="first">
							<view class="lab">
								空调温度
							</view>
							<view class="con">
								24.5℃
							</view>
						</view>
					</view>
				</view>
				<view class="sixItem">
					<image class="six6" src="/static/deviceState/6.png" mode=""></image>
					<view class="rightBox">
						<view class="first last">
							<view class="lab">
								空调
							</view>
							<view class="con green">
								运行中
							</view>
						</view>
						<view class="first last">
							<view class="lab">
								新风
							</view>
							<view class="con red">
								待机
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="fourBox">
				<view class="fourItem" @click="handleKT">
					<image src="/static/deviceState/5.png" mode=""></image>
					<text>空调</text>
				</view>
				<view class="fourItem" @click="handleLD">
					<image class="img2" src="/static/deviceState/7.png" mode=""></image>
					<text>联动</text>
				</view>
				<view class="fourItem" @click="handleXF">
					<image src="/static/deviceState/8.png" mode=""></image>
					<text>新风</text>
				</view>
				<view class="fourItem" @click="handleGJ">
					<image src="/static/deviceState/9.png" mode=""></image>
					<text>关机</text>
				</view>
			</view>
			<!-- 滤网健康度 -->
			<view class="gridBox">
				<view class="gridTitle">
					<view class="left">
						滤网健康度
					</view>
					<view class="right">
						100%
					</view>
				</view>
				<view class="line">
					<view class="green" :style="{'width':'80%'}">
						
					</view>
				</view>
			</view>
			<!-- 电量时间 -->
			<view class="fourView">
				<view class="fourViewItem">
					<view class="lab">
						空调电量
					</view>
					<view class="con">
						31度
					</view>
				</view>
				<view class="fourViewItem">
					<view class="lab">
						空调时间
					</view>
					<view class="con">
						1.5h
					</view>
				</view>
				<view class="fourViewItem">
					<view class="lab">
						新风电量
					</view>
					<view class="con">
						31度
					</view>
				</view>
				<view class="fourViewItem">
					<view class="lab">
						新风时间
					</view>
					<view class="con">
						31h
					</view>
				</view>
			</view>
			<!-- 地址版本 -->
			<view class="footer">
				<view class="footerCon">
					<view class="address">
						哈尔滨
					</view>
					<view class="bb">
						固体版本:34vc
					</view>
				</view>
			</view>
		</view>
		<tabbar active="1"></tabbar>
	</view>

</template>

<script>
	import tabbar from '@/components/Tab_bar.vue'
	export default {
		components: {
			tabbar
		},
		data() {
			return {
				time: '',
				title: 'Hello'
			}
		},
		onLoad() {
			this.updateTime()
			setInterval(this.updateTime, 1000);
		},
		methods: {
			// 点击蓝牙
			handleLy() {

			},
			// 点击刷新
			reset() {

			},
			// 点击空调
			handleKT() {

			},
			// 点击联动
			handleLD() {

			},
			// 点击新风
			handleXF() {

			},
			// 点击关机
			handleGJ() {

			},
			getFormattedTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份从 0 开始，需要 +1
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');
				return `${year}年 ${month}月 ${day}日 ${hours}:${minutes}:${seconds}`;
			},
			updateTime() {
				this.time = this.getFormattedTime()
			}
		}
	}
</script>

<style lang="less" scoped>
	.bigBox {
		background: #f9fafb;
		min-height: 100vh;

		.headerBox {
			height: 77px;
			background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #FFFFFF;
			box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

			.title {
				width: 100vw;
				height: 42px;
				line-height: 42px;
				text-align: center;
				font-size: 17.5px;
				font-weight: bold;
				font-family: Inter;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 14px;
				box-sizing: border-box;

				image {
					width: 14px;
					height: 14px;
				}
			}

			.time {
				height: 25px;
				line-height: 25px;
				font-family: Inter;
				font-size: 15.75px;
				text-align: center;
				color: #4B5563;
			}
		}

		.container {
			padding: 0 14px;

			.sixBox {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				padding-top: 7px;
				margin-bottom: 7px;

				.sixItem {
					width: 333rpx;
					height: 70px;
					border-radius: 7px;
					background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #FFFFFF;
					box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
					display: flex;
					align-items: center;
					padding-left: 14px;
					box-sizing: border-box;
					margin-bottom: 14px;

					image {
						height: 14px;
						margin-right: 10.5px;
					}

					.six1 {
						width: 8.75px;
					}

					.six2 {
						width: 14px;
					}

					.six3 {
						width: 10.5px;
					}

					.six4 {
						width: 15.75px;
					}

					.six5 {
						width: 12.25px;
					}

					.six6 {
						width: 14px;
					}

					.rightBox {
						display: flex;

						.first {
							margin-right: 10px;

							.lab {
								height: 18px;
								line-height: 18px;
								font-family: Inter;
								font-size: 12.25px;
								color: #6B7280;
							}

							.con {
								height: 25px;
								line-height: 25px;
								font-family: Inter;
								font-size: 15.75px;
								font-weight: 500;
							}

							.green {
								color: #22C55E;
							}

							.red {
								color: #EF4444;
							}
						}

						.last {
							.lab {
								color: #000000;
								font-weight: 500;
							}

							.con {
								font-size: 15.75px;
							}

						}
					}
				}
			}

			.fourBox {
				display: flex;
				justify-content: space-between;
				margin-bottom: 20px;

				.fourItem {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					border-radius: 4px;
					flex: 1;
					height: 54.5px;
					margin-right: 10px;
					background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #FFFFFF;
					box-sizing: border-box;
					border: 1px solid #E5E7EB;
					box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);

					&:last-child {
						margin-right: 0;
					}

					image {
						height: 14px;
						width: 14px;
						margin-bottom: 3px;
					}

					.img2 {
						width: 17.5px;
					}

					text {
						font-family: Inter;
						font-size: 10.5px;
						font-weight: normal;
						height: 14px;
						line-height: 14px;
						text-align: center;
					}
				}
			}

			.gridBox {
				margin-bottom: 20px;

				.gridTitle {
					display: flex;
					align-items: center;
					justify-content: space-between;
					height: 21px;

					.left {
						color: #4B5563;
						height: 21px;
						font-family: Inter;
						font-size: 14px;
					}

		

					.right {
						color: #22C55E;
						font-family: Inter;
						font-size: 14px;
						font-weight: normal;
					}
				}
				.line {
					background: rgba(220, 225, 226, 1);
					height: 7px;
					border-radius: 3.5px;
					width: 100%;
					margin-top: 6px;
					// position: relative;
					.green {
						height: 100%;
						background: #22c55e;
						height: 7px;
						border-radius: 3.5px;
					}
				}
			}

			.fourView {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-bottom: 15px;

				.fourViewItem {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					width: 333rpx;
					height: 70px;
					border-radius: 7px;
					background: linear-gradient(0deg, rgba(0, 0, 0, 0.001), rgba(0, 0, 0, 0.001)), #EFF6FF;
					box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
					margin-bottom: 14px;

					.lab {
						font-family: Inter;
						font-size: 12.25px;
						font-weight: normal;
						height: 18px;
						line-height: 18px;
						color: #2563EB;
					}

					.con {
						height: 25px;
						line-height: 25px;
						font-family: Inter;
						font-size: 17.5px;
						font-weight: 500;
						color: #1E40AF;
					}
				}
			}

			.footer {
				padding: 0 14px;

				.footerCon {
					height: 49px;
					border-radius: 7px;
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 0 14px;
					background: #ffffff;

					.address {
						color: #1F2937;
						font-family: Inter;
						font-size: 14px;
						font-weight: 500;
					}

					.bb {
						color: #4B5563;
						font-family: Inter;
						font-size: 14px;
						font-weight: normal;
					}
				}
			}
		}
	}
</style>